<template>
  <div class="home-page-container">
    <div class="left-div">
      <left-bar :tabs="leftBarTabs" @tab-click="handleTabClick"/>
    </div>
    <div class="right-body">
      <info-one v-if="tabIndex === 0"/>
      <under-development v-if="tabIndex === 1"/>
      <teaching-tools v-if="tabIndex === 2"/>
    </div>
  </div>
</template>

<script>

import LeftBar from '@/views/component/leftBar.vue'
import InfoOne from '@/views/home/component/InfoOne.vue'
import TeachingTools from '@/views/home/component/TeachingTools.vue'
import UnderDevelopment from '@/views/component/UnderDevelopment.vue'

export default {
  name: 'Home',
  components: { TeachingTools, InfoOne, LeftBar, UnderDevelopment },
  data() {
    return {
      leftBarTabs: [
        { icon: 'fa-solid fa-tents', alt: '信息一览', color: '#ae5ef2' },
        { icon: 'fa-solid fa-chart-area', alt: '数据统计', color: '#2f8fcf' },
        { icon: 'fa-solid fa-screwdriver-wrench', alt: '学习工具', color: '#f29d72' }
      ],
      tabIndex: 0
    }
  },
  mounted() {
  },
  methods: {
    handleTabClick({ index, tab }) {
      this.tabIndex = index
    }
  }
}
</script>
<style scoped>
.home-page-container {
  display: flex;
  align-items: center; /* 垂直方向居中 */
  justify-content: space-between; /* 水平方向居中 */
  height: calc(100vh - 85px);
  /*padding: 20px;*/
  width: 100%;
  box-sizing: border-box;

  .left-div {
    display: flex;
    align-items: center; /* 垂直方向居中 */
    justify-content: center; /* 水平方向居中 */
    max-width: 100px;
  }

  .right-body {
    background-color: white;
    width: calc(100% - 110px);
    justify-content: space-between;
    height: 100%;
    border-radius: 16px; /* 圆角 */
    box-shadow: 0 8px 24px rgba(8, 8, 8, 0.15); /* 阴影 */
    overflow-y: auto; /* ✅ 如果内容超出高度，内部滚动 */
  }
}

/* 滚动条美化（可选） */
.right-body::-webkit-scrollbar {
  width: 0;
}

.right-body::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 16px;
}

.right-body::-webkit-scrollbar-track {
  background-color: transparent;
}
</style>
